Documentation by “Designesia"

“Onehost v1.0”

Onehost Template
By: designesia
Email: designesia@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Also please don't forget to give rating! Thanks so much! :)

HTML Structure
1. Sample Structure For Content
2. Create Columns
Color Schemes
1. Light color
2. Dark color
JavaScript
Parallax Background
Contact PHP

A) HTML structure - top

This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <section> tag. To create more section you can duplicate <section> code then rename id atributte with dieffrent name.

1) Sample Structure For Content

... header area ...

<section id="content">
     <div class="container">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </div>
</section>


<section id="about-us">
     <div class="container">
          <div class="row">
              <div class="col-md-12">
                  this is your content
              </div>
          </div>
     </div>
</section>

... footer area ...

2) Create Columns

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.

<div class="row">
     <div class="col-md-6"> this is 1/2 columns </div>
     <div class="col-md-6"> this is 1/2 columns </div>
</div>

<div class="row">
     <div class="col-md-4"> this is 1/3 columns </div>
     <div class="col-md-8"> this is 2/3 columns </div>
</div>

<div class="row">
     <div class="col-md-3"> this is 1/4 columns </div>
     <div class="col-md-9"> this is 3/4 columns </div>
</div>

B) Color Schemes- top

This theme already with two color schemes. You can simply use it by add class name to <body> tag.

1) Light Color

Insert class below in body tag

<body class="light">

This class also can be used for div or section only.

<div class="light">
<section class="light">

2) Dark Color

Insert class below in body tag

<body class="dark">

This class also can be used for div or section only.

<div class="dark">
<section class="dark">

C) Javascript - top

jquery.min.js - http://docs.jquery.com/Downloading_jQuery
bootstrap.min.js - bootstrap js file
designesia.js - custom js file
jquery.isotope.min.js - used in gallery page
jquery.prettyPhoto.js - used to open popup image
easing.js - http://archive.plugins.jquery.com/project/Easing
jquery.ui.totop.js - used to scroll to top
validation.js - used for contact form validation

1) Create parallax backrgound

Create a section tags then give it an id name.

<section id="my-section">...content here...</section>

Add data-speed attribute (1-10).

<section id="my-section" data-speed="10">...content here...</section>

Add data-type attribute below.

 <section id="my-section" data-speed="10" data-type="background">...content here...</section>

Open style.css file, set background image for your section.
```
#my-section{
     background-image:my-bg-image.jpg;
}
```
Done.

C) Contact Page- top

Open > email.php. Change $to value with your email.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

designesia

Go To Table of Contents